<!--
 * @Author: your name
 * @Date: 2020-05-19 16:58:54
 * @LastEditTime: 2020-06-30 13:33:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \移动端项目\mobile_project_200106\mobile_project\src\pages\details\details.vue
--> 
<template>
  <div class="details">
    <!-- 头部标题 -->
    <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="back"></van-nav-bar>
    <div class="content">
      <!-- 商品图片 -->
      <detailsImage :imageUrl="datas.image1"></detailsImage>
      <!-- 商品详情信息 -->

      <detailsInfo :name="datas.name" :price="datas.oriPrice"></detailsInfo>

      <!-- 商品详情图片 -->
      <goodsDetails :detail="datas.detail"></goodsDetails>

      <!-- 加入购物车 -->
      <toShopcar @showSku="showSku"></toShopcar>

      <!-- 商品 sku -->
      <transition name="sku"><sku v-if="skuBool" @closeSku="closeSku" :datas="datas"></sku></transition>
      
    </div>
  </div> 
</template>

<script>
import * as api from "@/request/api/details.js";
import detailsImage from "./components/detalisImage";
import detailsInfo from "./components/detailsInfo";
import goodsDetails from "./components/goodsDetails";
import toShopcar from "./components/toShopcar";
import sku from "./components/sku";
export default {
  props: ["id"],
  data() {
    return {
      datas: {},
      skuBool: false //是否显示sku
    };
  },

  components: {
    detailsImage,
    detailsInfo,
    goodsDetails,
    toShopcar,
    sku
  },
  methods: {
    back(){
      this.$router.back()
    },
    showSku(){//点击展示sku
      this.skuBool=true
    },

    closeSku(){
      this.skuBool=false
    },
    async API_getDetailGoodsInfo(goodsId) {
      //读取商品详情
      return await api.getDetailGoodsInfo({
        goodsId: goodsId
      });
    }
  },
  async activated() {
    let res = await this.API_getDetailGoodsInfo(this.id);

    this.datas = res.data.data;
    // console.log(this.datas);
  }
};
</script>

<style lang="scss">
@import "@/style/details/details";

</style>